<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS3/SVG自定义单选框Radiobox跳跃选择动画DEMO演示</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Inconsolata'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

  <svg class="filter" version="1.1">
  <defs>
    <filter id="gooeyness">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="gooey" />
      <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
    </filter>
  </defs>
</svg>
<div class="radios-boxes">
  <div class="radios">
    <input type="radio" name="radio" id="radio1" class="radio" value="r">
    <input type="radio" name="radio" id="radio2" class="radio" value="k">
    <input type="radio" name="radio" id="radio3" class="radio" value="t">
    <input type="radio" name="radio" id="radio4" class="radio" value="s">
    <div class="ball"></div>
  </div>
  <div class="labels">
    <label for="radio1" class="label">radio</label>
    <label for="radio2" class="label">killed</label>
    <label for="radio3" class="label">the video</label>
    <label for="radio4" class="label">star</label>
  </div>
</div>
  
    <script  src="js/index.js"></script>

</body>
</html>
